<template>
	<view class="coupon_div" v-if="list.length>0" :style="'background:'+mydata.bg_div_color">
		<scroll-view scroll-x v-if="mydata.show_type == 'scroll'">
			<view  :class="'coupon-list ' + mydata.show_type">
				<view @click="tocoupon(item)" class="item-list" v-for="(item, i) in list" :key="i">
					<view class="coupon-bg">
						<!-- <img src="@/assets/images/bg_coupon_index_4.png" alt=""  /> -->
						<vimage imgtype="1" src="static/images/bg_coupon_index_4.png" style="height: 100%; width: 100%;" mode="widthFix"></vimage>
					</view>
					<view class="flex" :style="'height: 100%;' + 'color:' + mydata.textcolor + '; background:' + mydata.bgcolor">
						<view style="text-align: center; width: 75%;">
							<view class="price" style="height: 70rpx; font-size: 16px; ">￥{{ item.denomination }}</view>
							<view class="price" style="height: 70rpx; font-size: 10px;">满{{ item.conditions }}元可用</view>
						</view>
						<view class="btns" style="flex-grow: 1;"><view class="right">立即领取</view></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-else  :class="'coupon-list ' + mydata.show_type">
			<view @click="tocoupon(item)" class="item-list" v-for="(item, i) in list" :key="i">
				<view class="coupon-bg">
					<!-- <img src="@/assets/images/bg_coupon_index_4.png" alt=""  /> -->
					<vimage imgtype="1" src="static/images/bg_coupon_index_4.png" style="height: 100%; width: 100%;" mode="widthFix"></vimage>
				</view>
				<view class="flex" :style="'height: 100%;' + 'color:' + mydata.textcolor + '; background:' + mydata.bgcolor">
					<view style="text-align: center; width: 75%;">
						<view class="price" style="height: 70rpx; font-size: 16px; ">￥{{ item.denomination }}</view>
						<view class="price" style="height: 70rpx; font-size: 10px;">满{{ item.conditions }}元可用</view>
					</view>
					<view class="btns" style="flex-grow: 1;"><view class="right">立即领取</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';	
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data(){
		return{
			list:[]
		}
	},
	watch: {
		g_id() {
			this.getlist();
		}
	},
	computed: {
		...mapState({
			g_id:state=>state.g_id
		})
	},
	created() {
		this.getlist()
	},
	methods: {
		tocoupon(item) {
			this.Jumpurl({
				type: 4,
				id: item.id
			});
		},
		getlist() {
			let list = this.mydata.list;
			let ids = [];
			list.forEach(a => {
				ids.push(a.id);
			});
			this.$http(
				'/coupon/id',
				{
					ids: JSON.stringify(ids)
				},
				'POST'
			).then(res => {
				if (res.statusCode == 200) {
					this.list = res.data.msg;
				} else {
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.coupon_div {
	box-sizing: border-box;
	border-radius: 6px;
	overflow: hidden;
	.coupon-list {
		.item-list {
			background: rgb(217, 188, 139);
			width: 274rpx;
			color: rgb(255, 255, 255);
			margin-left: 20rpx;
			height: 140rpx;
			position: relative;
			.coupon-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.flex {
				display: flex;
				width: 100%;
				.price {
					justify-content: center;
					display: flex;
					align-items: center;
				}
			}
			.btns {
				display: flex;
				align-items: center;
			}
			.right {
				width: 1.6rem;
				font-size: 26rpx;
				line-height: 1.2;
				text-align: center;
				margin-right: 4rpx;
				writing-mode: vertical-rl;
			}
		}
		&.scroll {		
			display: flex;
			flex-direction: row;
			padding: 20rpx 24rpx 20rpx 4rpx;
			.flex {
				display: flex;
				width: 274rpx;
			}
		}
		&.block {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20rpx 24rpx;
			.item-list {
				width: 340rpx;
				height: 172rpx;
				margin-left: 0px;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
